<template>
    <div>
        <div class="div1">
            <div class="block">
            <span class="demonstration">发货地：</span>
            <el-cascader
                v-model="faddress_value"
                :options="faddress_list"
                :props="{ expandTrigger: 'hover' }"
                @change="faddressChange"></el-cascader>

            </div>
            
            <div class="block">
                <span class="demonstration">收货地：</span>
                <el-cascader
                v-model="saddress_value"
                :options="faddress_list"
                :props="{ expandTrigger: 'hover' }"
                @change="saddressChange"></el-cascader>
            </div>
        </div>

        <div class="div">
            
            <el-row>
                <el-button type="success" @click="post_address">确认</el-button>
            </el-row>
            
        </div>

        <div class="temp_time" v-show="gd_value !=0">
            <el-card>
            <span>最高温度：{{ 4 }} &nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            
            最低温度：{{ 2 }} &nbsp;&nbsp;&nbsp;&nbsp; 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            
            最低时长：{{ 48 }}h  &nbsp;&nbsp;&nbsp;&nbsp; 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            最高时长：{{ 89 }}h &nbsp;&nbsp;&nbsp;&nbsp; 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            平均时长{{ 30 }}h  </span>
            </el-card>
        </div>

        <div class="waybill" v-show="gd_value !=0">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                label="运单号"
                width="250">
                <template slot-scope="scope">{{ scope.row.waybill_number }}</template>
                </el-table-column>
                <el-table-column
                label="设备号"
                width="250">
                <template slot-scope="scope">{{ scope.row.equipment_id }}</template>
                </el-table-column>
            </el-table>
            <!-- <div style="margin-top: 20px">
                <el-button @click="toggleSelection()">查看曲线</el-button>
            </div> -->
        </div>
       
       <div class='gd' v-show="gd_value !=0">
           <div id="test-map" />
       </div>
    </div>
</template>


<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import { get_f_address,get_s_address,get_queryaddress} from '../../api/api'
  export default {
    data() {
      return {
        //发货地址
        faddress_value: [],
        faddress_list:[],
        saddress_value: [],
        //单号
        tableData: [],
        multipleSelection: [],
        //高德
        map: '', // 地图
            // 轨迹数组，格式[{},{},...]
            path: [
                {
                path: []
                }
            ], 
        //高德是否启动
        gd_value:'',
      };
    },
    mounted() {
        //获取发货地址
        this.f_address()
        
  },
    methods: {
        //提交地址获取订单
        post_address(){
            get_queryaddress({f_address:this.faddress_value,s_address:this.saddress_value}).then(res=>{
               if(res.code==200){
                    this.tableData = res.data 
                    let f_address = [ res.data[0]['address'].split(',')[0],res.data[0]['address'].split(',')[1]]
                    let s_address = [ res.data[0]['delivery'].split(',')[0],res.data[0]['delivery'].split(',')[1]]
                    this.path[0].path.push(f_address)
                    this.path[0].path.push(s_address)

                    this.gd()
                    this.gd_value = 1
               }else{
                   this.gd_value = 0
                   alert(res.message)
               }
            })
        },
        //高德地图
        gd(){
            lazyAMapApiLoaderInstance.load().then(() => {
            this.map = new AMap.Map('test-map', {
                // zooms: [13, 50], // 地图缩放范围
                center: new AMap.LngLat(116.397428, 39.90923)
            })
            AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
                if (!PathSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas！')
                return
                }
                // 创建组件实例
                var pathSimplifierIns = new PathSimplifier({
                map: this.map,
                zIndex: 100, // 图层叠加顺序
                data: this.path, // 巡航路径
                // 获取巡航路径中的路径坐标数组
                getPath: (pathData, pathIndex) => {
                    return pathData.path
                }
                })
                // 创建巡航器
                var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
                loop: true, // 是否循环
                speed: 200000 // 速度(km/h)
                })
                pathNavigator.start()
            })
            }) 
        },
        //获取发货地址
        f_address(){
            get_f_address().then(res=>{
                this.faddress_list.push(res.data[0])             
            })
        },
        //发货
        faddressChange(faddress_value) {
            this.faddress_value = faddress_value
        },
        //收货
        saddressChange(saddress_value) {
            this.saddress_value = saddress_value
        },
        // 单号
        // toggleSelection(rows) {
        // if (rows) {
        //     rows.forEach(row => {
        //         this.$refs.multipleTable.toggleRowSelection(row);
        //     });
        //     } else {
        //     this.$refs.multipleTable.clearSelection();
        //     }
        // },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        
    }
  };
</script>


<style >
    .div{
        width: 300px;
        float: right;
        
    }
    .div1{
        width: 83.7%;
        float: left;
        
    }
    .block{
        width: 300px;
        float: left;
    }
    .waybill{
        width:500px;
        float: right;
        margin: 200px 0px 0px 0px;

    }
     #test-map{
        height:700px;
        width:1000px;
        float: left;
        margin-top: 50px;
    }
    .temp_time{
        float: left;
        margin: 50px 0px 0px 0px;
        width: 100%;
    }
    
</style>
